<?php
	$bannerCollection = $this->getBannerCollection();
	$i = 0;
?>
<?php $timeDelay = $this->getDelayTime() ?>
<?php $showdesc = $this->isShowDescription() ?>
<?php $listStyle = $this->getListStyle() ?>
<?php $imagewidth = $this->getImageWidth() ?>
<?php $imageheight = $this->getImageHeight() ?>
<?php if (!count($bannerCollection)): ?>
<?php elseif ($listStyle == '1'):?>
<div id="slider-1" class="slide-container">
	<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/banner1.js') ?>"></script>
	<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/magestore/bannerslider/banner1.css');?>" media="all" />
	<div id="slide-images" class="slide-show" style="width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px;">
		<div id="pettabs" class="indentmenu">
			<ul>
			<?php foreach($bannerCollection as $banner): $i++; ?>
				<li><a href="#" rel="tab<?php echo $i;?>" <?php if ($i == 1) { echo 'class="selected"'; }?>><?php echo $i;?></a></li>
			<?php endforeach; ?>
			</ul>
		</div>
		<div class="banner-content-style1"> 
			<?php $i = 0; foreach ($bannerCollection as $banner): $i++; ?>
			<div id="tab<?php echo $i;?>" class="tabcontent">
				<a href="<?php echo $banner['weblink'];?>">
				<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . $banner['filename']?>" title="<?php echo $banner['title']?>" alt="<?php echo $banner['title']?>" style="width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px;"/>				
				<?php if ($showdesc == '1'):?>
				<div class="banner_content" style="width:<?php echo $imagewidth - 20?>px;"><p><?php echo $banner['content']; ?></p></div>
				<?php endif;?>
				</a>
			</div>
			<?php endforeach; ?>
		</div>
	</div>
	<script type="text/javascript">
		<?php echo 'var delay = ' . $timeDelay . ';'; ?>
		var mypets=new ddtabcontent("pettabs");
		mypets.setpersist(true);
		mypets.setselectedClassTarget("link");
		mypets.init(delay);
	</script>
</div>

<?php elseif ($listStyle == '2'):?>
<div id="slider-2" class="slide-container">
<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/jquery-1.4.2.min.js') ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/magestore/bannerslider/banner2.css');?>" media="all" />
<script type="text/javascript">
var $j = jQuery.noConflict(); 
$j(document).ready(function(){
	//Execute the slideShow
	slideShow();
});
function slideShow() {

	//Set the opacity of all images to 0
	$j('#gallery a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$j('#gallery a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$j('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$j('#gallery .caption').css({width: $j('#gallery a').find('img').css('width')});
	<?php if ($showdesc == '1'):?>
	//Get the caption of the first image from REL attribute and display it
	$j('#gallery .content').html($j('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
	<?php endif ?>
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',<?php echo $timeDelay; ?>);
	
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($j('#gallery a.show')?  $j('#gallery a.show') : $j('#gallery a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $j('#gallery a:first') :current.next()) : $j('#gallery a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
	//Set the opacity to 0 and height to 1px
	$j('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$j('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
	
	//Display the content
	$j('#gallery .content').html(caption);
	
	
}
</script>
	<div id="gallery" style="width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px;">
		<?php foreach ($bannerCollection as $banner):?>
		<a href="<?php echo $banner['weblink'];?>" class="">
			<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . $banner['filename']?>" width="<?php echo $imagewidth;?>" height="<?php echo $imageheight;?>" title="<?php echo $banner['title']?>" alt="<?php echo $banner['title']?>" <?php if ($showdesc == '1'):?> rel="<h3><?php echo $banner['title']?></h3><?php echo $banner['content']; ?>"<?php endif;?> />
		</a>
		<?php endforeach; ?>
		<?php if ($showdesc == '1'):?>
		<div class="caption"><div class="content"></div></div>
		<?php endif ?>
	</div>
</div>

<?php elseif ($listStyle == '3'):?>
<div id="slider-3" class="slide-container">
<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/jquery-1.4.2.min.js') ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/magestore/bannerslider/banner3.css');?>" media="all" />
<script type="text/javascript">
var $j = jQuery.noConflict(); 
$j(document).ready(function(){
	$j('#games').coinslider({ hoverPause: false });
});

(function($j) {

	var params 		= new Array;
	var order		= new Array;
	var images		= new Array;
	var links		= new Array;
	var linksTarget = new Array;
	var titles		= new Array;
	var interval	= new Array;
	var imagePos	= new Array;
	var appInterval = new Array;	
	var squarePos	= new Array;	
	var reverse		= new Array;
	
	$j.fn.coinslider= $j.fn.CoinSlider = function(options){
		
		init = function(el){
				
			order[el.id] 		= new Array();	// order of square appereance
			images[el.id]		= new Array();
			links[el.id]		= new Array();
			linksTarget[el.id]	= new Array();
			titles[el.id]		= new Array();
			imagePos[el.id]		= 0;
			squarePos[el.id]	= 0;
			reverse[el.id]		= 1;						
				
			params[el.id] = $j.extend({}, $j.fn.coinslider.defaults, options);
						
			// create images, links and titles arrays
			$j.each($j('#'+el.id+' img'), function(i,item){
				images[el.id][i] 		= $j(item).attr('src');
				links[el.id][i] 		= $j(item).parent().is('a') ? $j(item).parent().attr('href') : '';
				linksTarget[el.id][i] 	= $j(item).parent().is('a') ? $j(item).parent().attr('target') : '';
				titles[el.id][i] 		= $j(item).next().is('span') ? $j(item).next().html() : '';
				$j(item).hide();
				$j(item).next().hide();
			});			
			

			// set panel
			$j(el).css({
				'background-image':'url('+images[el.id][0]+')',
				'width': params[el.id].width,
				'height': params[el.id].height,
				'position': 'relative',
				'background-position': 'top left'
			}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");	
			
				
			// create title bar
			$j('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000; width:<?php echo $imagewidth - 20;?>px'></div>");
						
			$j.setFields(el);
			
			if(params[el.id].navigation)
				$j.setNavigation(el);
			
			$j.transition(el,0);
			$j.transitionCall(el);
				
		}
		
		// squares positions
		$j.setFields = function(el){
			
			tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
			tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
			
			counter = sLeft = sTop = 0;
			tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
			tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
			
			for(i=1;i <= params[el.id].sph;i++){
				gapx = tgapx;
				
					if(gapy > 0){
						gapy--;
						sHeight = tHeight+1;
					} else {
						sHeight = tHeight;
					}
				
				for(j=1; j <= params[el.id].spw; j++){	

					if(gapx > 0){
						gapx--;
						sWidth = tWidth+1;
					} else {
						sWidth = tWidth;
					}

					order[el.id][counter] = i+''+j;
					counter++;
					
					if(params[el.id].links)
						$j('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
					else
						$j('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
								
					// positioning squares
					$j("#cs-"+el.id+i+j).css({ 
						'background-position': -sLeft +'px '+(-sTop+'px'),
						'left' : sLeft ,
						'top': sTop
					});
				
					sLeft += sWidth;
				}

				sTop += sHeight;
				sLeft = 0;					
					
			}
			
			
			$j('.cs-'+el.id).mouseover(function(){
				$j('#cs-navigation-'+el.id).show();
			});
		
			$j('.cs-'+el.id).mouseout(function(){
				$j('#cs-navigation-'+el.id).hide();
			});	
			
			$j('#cs-title-'+el.id).mouseover(function(){
				$j('#cs-navigation-'+el.id).show();
			});
		
			$j('#cs-title-'+el.id).mouseout(function(){
				$j('#cs-navigation-'+el.id).hide();
			});	
			
			if(params[el.id].hoverPause){	
				$j('.cs-'+el.id).mouseover(function(){
					params[el.id].pause = true;
				});
			
				$j('.cs-'+el.id).mouseout(function(){
					params[el.id].pause = false;
				});	
				
				$j('#cs-title-'+el.id).mouseover(function(){
					params[el.id].pause = true;
				});
			
				$j('#cs-title-'+el.id).mouseout(function(){
					params[el.id].pause = false;
				});	
			}
					
			
		};
				
		
		$j.transitionCall = function(el){
		
			clearInterval(interval[el.id]);	
			delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
			interval[el.id] = setInterval(function() { $j.transition(el)  }, delay);
			
		}
		
		// transitions
		$j.transition = function(el,direction){
			
			if(params[el.id].pause == true) return;
			
			$j.effect(el);
			
			squarePos[el.id] = 0;
			appInterval[el.id] = setInterval(function() { $j.appereance(el,order[el.id][squarePos[el.id]])  },params[el.id].sDelay);
					
			$j(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
			
			if(typeof(direction) == "undefined")
				imagePos[el.id]++;
			else
				if(direction == 'prev')
					imagePos[el.id]--;
				else
					imagePos[el.id] = direction;
		
			if  (imagePos[el.id] == images[el.id].length) {
				imagePos[el.id] = 0;
			}
			
			if (imagePos[el.id] == -1){
				imagePos[el.id] = images[el.id].length-1;
			}
	
			$j('.cs-button-'+el.id).removeClass('cs-active');
			$j('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');
			
			if(titles[el.id][imagePos[el.id]]){
				$j('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
				$j('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
			} else {
				$j('#cs-title-'+el.id).css('opacity',0);
			}				
				
		};
		
		$j.appereance = function(el,sid){

			$j('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);

			if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
				clearInterval(appInterval[el.id]);
				return;
			}

			$j('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
			$j('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
			squarePos[el.id]++;
			
		};
		
		// navigation
		$j.setNavigation = function(el){
			// create prev and next 
			$j(el).append("<div id='cs-navigation-"+el.id+"'></div>");
			$j('#cs-navigation-'+el.id).hide();
			$j('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'><span>prev</span></a>");
			$j('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'><span>next</span></a>");
			$j('#cs-prev-'+el.id).css({
				'position' 	: 'absolute',
				'top'		: params[el.id].height/2 - 15,
				'left'		: 0,
				'z-index' 	: 1001,
				'line-height': '30px'
				//'opacity'	: params[el.id].opacity
			}).click( function(e){
				e.preventDefault();
				$j.transition(el,'prev');
				$j.transitionCall(el);				
			}).mouseover( function(){ $j('#cs-navigation-'+el.id).show() });
				
			$j('#cs-next-'+el.id).css({
				'position' 	: 'absolute',
				'top'		: params[el.id].height/2 - 15,
				'right'		: 0,
				'z-index' 	: 1001,
				'line-height': '30px'
				//'opacity'	: params[el.id].opacity
			}).click( function(e){
				e.preventDefault();
				$j.transition(el);
				$j.transitionCall(el);
			}).mouseover( function(){ $j('#cs-navigation-'+el.id).show() });
		
			// image buttons
			//$j("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($j('#coin-slider-'+el.id));

			
			for(k=1;k<images[el.id].length+1;k++){
				$j('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
			}
			
			$j.each($j('.cs-button-'+el.id), function(i,item){
				$j(item).click( function(e){
					$j('.cs-button-'+el.id).removeClass('cs-active');
					$j(this).addClass('cs-active');
					e.preventDefault();
					$j.transition(el,i);
					$j.transitionCall(el);				
				})
			});	
			
			$j('#cs-navigation-'+el.id+' a').mouseout(function(){
				$j('#cs-navigation-'+el.id).hide();
				params[el.id].pause = false;
			});						

			$j("#cs-buttons-"+el.id).css({
				'left'			: '50%',
				'margin-left' 	: -images[el.id].length*15/2-5,
				'position'		: 'relative'
				
			});
			
				
		}




		// effects
		$j.effect = function(el){
			
			effA = ['random','swirl','rain','straight'];
			if(params[el.id].effect == '')
				eff = effA[Math.floor(Math.random()*(effA.length))];
			else
				eff = params[el.id].effect;

			order[el.id] = new Array();

			if(eff == 'random'){
				counter = 0;
				  for(i=1;i <= params[el.id].sph;i++){
				  	for(j=1; j <= params[el.id].spw; j++){	
				  		order[el.id][counter] = i+''+j;
						counter++;
				  	}
				  }	
				$j.random(order[el.id]);
			}
			
			if(eff == 'rain')	{
				$j.rain(el);
			}
			
			if(eff == 'swirl')
				$j.swirl(el);
				
			if(eff == 'straight')
				$j.straight(el);
				
			reverse[el.id] *= -1;
			if(reverse[el.id] > 0){
				order[el.id].reverse();
			}

		}

			
		// shuffle array function
		$j.random = function(arr) {
						
		  var i = arr.length;
		  if ( i == 0 ) return false;
		  while ( --i ) {
		     var j = Math.floor( Math.random() * ( i + 1 ) );
		     var tempi = arr[i];
		     var tempj = arr[j];
		     arr[i] = tempj;
		     arr[j] = tempi;
		   }
		}	
		
		//swirl effect by milos popovic
		$j.swirl = function(el){

			var n = params[el.id].sph;
			var m = params[el.id].spw;

			var x = 1;
			var y = 1;
			var going = 0;
			var num = 0;
			var c = 0;
			
			var dowhile = true;
						
			while(dowhile) {
				
				num = (going==0 || going==2) ? m : n;
				
				for (i=1;i<=num;i++){
					
					order[el.id][c] = x+''+y;
					c++;

					if(i!=num){
						switch(going){
							case 0 : y++; break;
							case 1 : x++; break;
							case 2 : y--; break;
							case 3 : x--; break;
						
						}
					}
				}
				
				going = (going+1)%4;

				switch(going){
					case 0 : m--; y++; break;
					case 1 : n--; x++; break;
					case 2 : m--; y--; break;
					case 3 : n--; x--; break;		
				}
				
				check = $j.max(n,m) - $j.min(n,m);			
				if(m<=check && n<=check)
					dowhile = false;
									
			}
		}

		// rain effect
		$j.rain = function(el){
			var n = params[el.id].sph;
			var m = params[el.id].spw;

			var c = 0;
			var to = to2 = from = 1;
			var dowhile = true;


			while(dowhile){
				
				for(i=from;i<=to;i++){
					order[el.id][c] = i+''+parseInt(to2-i+1);
					c++;
				}
				
				to2++;
				
				if(to < n && to2 < m && n<m){
					to++;	
				}
				
				if(to < n && n>=m){
					to++;	
				}
				
				if(to2 > m){
					from++;
				}
				
				if(from > to) dowhile= false;
				
			}			

		}

		// straight effect
		$j.straight = function(el){
			counter = 0;
			for(i=1;i <= params[el.id].sph;i++){
				for(j=1; j <= params[el.id].spw; j++){	
					order[el.id][counter] = i+''+j;
					counter++;
				}
				
			}
		}

		$j.min = function(n,m){
			if (n>m) return m;
			else return n;
		}
		
		$j.max = function(n,m){
			if (n<m) return m;
			else return n;
		}		
	
	this.each (
		function(){ init(this); }
	);
	

	};


// default values
$j.fn.coinslider.defaults = {	
	width: <?php echo $imagewidth;?>, // width of slider panel
	height: <?php echo $imageheight;?>, // height of slider panel
	spw: 7, // squares per width
	sph: 5, // squares per height
	delay:<?php echo $timeDelay; ?>, // delay between images in ms
	sDelay: 30, // delay beetwen squares in ms
	opacity: 0.7, // opacity of title and navigation
	titleSpeed: 500, // speed of title appereance in ms
	effect: '', // random, swirl, rain, straight
	navigation: true, // prev next and buttons
	links : true, // show images as links 
	hoverPause: true // pause on hover		
};	

})(jQuery);
</script>
	<div id="gamesHolder">
		<div class="coin-slider" id="coin-slider-games">
			<div style="width:<?php echo $imagewidth;?>px; height: <?php echo $imageheight;?>px; position: relative;" id="games">
				<?php foreach ($bannerCollection as $banner):?>
				<a href="<?php echo $banner['weblink'];?>">
					<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . $banner['filename']?>" title="<?php echo $banner['title']?>" alt="<?php echo $banner['title']?>" style="width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px; display: none;"/>
					<?php if ($showdesc == '1'):?>
						<span style="display: none;">
							<b><?php echo $banner['title']?></b><br><?php echo $banner['content']; ?>
						</span>
					<?php endif;?>
				</a>
				<?php endforeach ?>
			</div>
		</div>
	</div>
</div>

<?php elseif ($listStyle == '4'):?>
<div id="slider-4" class="slide-container">
<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/jquery-1.4.2.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/jquery-easing-1.3.pack.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/jquery-easing-compatibility.1.2.pack.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/coda-slider.1.1.1.pack.js') ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/magestore/bannerslider/banner4.css');?>" media="all" />
<script type="text/javascript">
	var theInt = null;
	var $crosslink, $navthumb;
	var curclicked = 0;

	theInterval = function(cur){
	clearInterval(theInt);

	if( typeof cur != 'undefined' )
		curclicked = cur;

	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$j(".stripNav ul li a").eq(curclicked).trigger('click');
	
	theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$j(".stripNav ul li a").eq(curclicked).trigger('click');
		curclicked++;
		<?php $curclick = count ($bannerCollection); ?>
		if( <?php echo $curclick;?> == curclicked )
			curclicked = 0;
		
	}, <?php echo $timeDelay; ?>);
	};


	var $j = jQuery.noConflict(); 
	$j(document).ready(function(){
	$j("#main-photo-slider").codaSlider();

	$navthumb = $j(".nav-thumb");
	$crosslink = $j(".cross-link");

	$navthumb
	.click(function() {
		var $this = $j(this);
		theInterval($this.parent().attr('href').slice(1) - 1);
		return false;
	});

	theInterval();
	});
</script>
	<div class="slider-wrap">
		<div id="main-photo-slider" class="csw" style="width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px;">
			<div class="panelContainer">
				<?php $i = 0; foreach ($bannerCollection as $banner): $i++; ?>
				<div class="panel" title="Panel <?php echo $i;?>" style="width:<?php echo $imagewidth;?>px;" >
					<div class="wrapper-content-slider4">
						<a href="<?php echo $banner['weblink'];?>">
						<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . $banner['filename']?>" title="<?php echo $banner['title']?>" alt="<?php echo $banner['title']?>" style="width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px;"/>
						</a>
						<?php if ($showdesc == '1'):?>
						<div class="photo-meta-data"style="width:<?php echo $imagewidth - 20;?>px;">
							<b><?php echo $banner['title']?></b><br />
							<span><?php echo $banner['content']; ?></span>
						</div>
						<?php endif;?>
					</div>
				</div>
				<?php endforeach ?>
			</div>
		</div>
		<div id="movers-row">
			<?php $i = 0; foreach ($bannerCollection as $banner): $i++; ?>
			<div class="image-thumb"><a href="#<?php echo $i;?>" class="cross-link"><img class="nav-thumb" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . $banner['filename']?>" title="<?php echo $banner['title']?>" alt="<?php echo $banner['title']?>" style="width:60px; height:40px;"/></a></div>
			<?php endforeach ?>
		</div>
	</div>
</div>

<?php elseif ($listStyle == '5'):?>
<div id="slider-5" class="slide-container">
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/magestore/bannerslider/banner5.css');?>" media="all" />
<script type="text/javascript" src="<?php echo $this->getJsUrl('magestore/bannerslider/jquery-1.4.2.min.js') ?>"></script>
<script type="text/javascript">
var $j = jQuery.noConflict(); 
$j(document).ready(function(){
	$j('#carousel').infiniteCarousel();
});

(function($j){
	$j.fn.extend({ 
		infiniteCarousel: function(options)
		{
			var defaults = 
			{
				transitionSpeed: 800,
				displayTime:<?php echo $timeDelay; ?>,
				textholderHeight: .25,
				displayProgressBar: false,
				displayThumbnails: false,
				displayThumbnailNumbers: true,
				displayThumbnailBackground: true,
				thumbnailWidth: '20px',
				thumbnailHeight: '20px',
				thumbnailFontSize: '12px',
				easeLeft: 'linear',
				easeRight: 'linear',
				imagePath: '<?php echo $this->getSkinUrl('css/magestore/bannerslider/') ?>',
				inView: 1,
				padding: '0px',
				advance: 1,
				showControls: true,
				autoHideControls: true,
				autoHideCaptions: false,
				autoStart: true,
				prevNextInternal: true,
				enableKeyboardNav: true,
				onSlideStart: function(){},
				onSlideEnd: function(){},
				onPauseClick: function(){}
			};
		var options = $j.extend(defaults, options);
	
    		return this.each(function() {
    			var randID = Math.round(Math.random()*100000000);
			var o=options;
			var obj = $j(this);
			var autopilot = o.autoStart;

			var numImages = $j('img', obj).length; // Number of images
			var imgWidth = <?php echo $imagewidth;?>;
			var imgHeight = <?php echo $imageheight;?>;

			if(o.inView > numImages-1) o.inView=numImages-1; // check to make sure inview isnt greater than the number of images. inview should be at least two less than numimages (otherwise hinting wont work and animating left may catch a flash), but one less can work
			$j('p', obj).hide(); // Hide any text paragraphs in the carousel
			$j(obj).css({'position':'relative','overflow':'hidden'}).width((imgWidth*o.inView)+(o.inView*parseInt(o.padding)*2)).height(imgHeight+(parseInt(o.padding)*2)); //,'overflow':'hidden'
			$j('ul', obj).css({'position':'relative'}).width(imgWidth*numImages);
			$j('li', obj).css({/*'display':'inline',*/'float':'left'});

			// Move rightmost image over to the left
			$j('li:last', obj).prependTo($j('ul', obj));
			$j('ul', obj).css('left',-imgWidth-(parseInt(o.padding)*2)+'px').width(9999);

			// Build progress bar
			if(o.displayProgressBar)
			{
				$j(obj).append('<div id="progress'+randID+'" class="ic-progress-bar" style="position:absolute;bottom:0;background:#bbb;left:0;z-index:1"></div>');
				$j('#progress'+randID).width('100%').height(5).css('opacity','.6');
			}

			// Animate progress bar
			function startProgressBar(barTime)
			{
				barTime = (barTime==null)? o.displayTime:barTime;
				$j('#progress'+randID).width('100%').height(5);
				$j('#progress'+randID).animate({'width':0},barTime);
			}

			// Build textholder div(s) as wide as one image and as tall as the textholderHeight option
			var containerBorder = parseInt($j(obj).css('border-bottom-width')) + parseInt($j(obj).css('border-top-width'));
			if(isNaN(containerBorder)) containerBorder = 0; // IE returns NaN for $j(obj).css('border-bottom-width')
			var containerPaddingLeft = parseInt($j(obj).css('padding-left')); // Normally we'd do both left and right but only left matters here
			for(i=1;i<=o.inView;i++)
			{
				$j(obj).append('<div id="textholder'+randID+'_'+i+'" class="textholder" style="position:absolute;width:<?php echo $imagewidth - 20;?>px;bottom:0px;margin-bottom:'+-(imgHeight*o.textholderHeight+containerBorder)+'px;"><span></span></div>');
				$j('#textholder'+randID+'_'+i).css({'left':(i-1)*(imgWidth+parseInt(o.padding)*2),'margin-left':parseInt(o.padding)+containerPaddingLeft,'margin-right':o.padding});
				$j('#textholder'+randID+'_'+i).css({'backgroundColor':'#000','opacity':'0.7'});
				html = '<div class="minmax" id="minmax'+randID+'_'+i+'" style="width:8px;height:8px;position:absolute;top:1px;right:14px;cursor:pointer;background:url('+o.imagePath+'caption.gif) no-repeat 0 -8px"></div>';
				html += '<div class="close" id="close'+randID+'_'+i+'" style="width:8px;height:8px;position:absolute;top:1px;right:3px;cursor:pointer;background:url('+o.imagePath+'caption.gif) no-repeat 0 0"></div>';
				$j('#textholder'+randID+'_'+i).append(html);
				$j('#minmax'+randID+'_'+i).hide();
				$j('#close'+randID+'_'+i).hide();
				if(!o.autoHideCaptions) showtext($j('li:eq('+i+') p', obj).html(),i);
			}
			var textholderPadding = parseInt($j('#textholder'+randID+'_1').css('padding-left')) + parseInt($j('#textholder'+randID+'_1').css('padding-right'));
			if (textholderPadding > 0) $j('.textholder',obj).width(imgWidth-textholderPadding);

			$j('.close',obj).each(function(i){ // Need to use each() because a loop doesn't work in this situation. see http://www.bennadel.com/blog/534-The-Beauty-Of-The-jQuery-Each-Method.htm
				$j(this).click(function(){$j('#textholder'+randID+'_'+(i+1)).animate({marginBottom:(-imgHeight*o.textholderHeight)-containerBorder-1+'px'},500)});
			});
			$j('.minmax',obj).each(function(i){ // Same reason as previous chunk
				$j(this).click(function(){
					if(parseInt($j('#textholder'+randID+'_'+(i+1)).css('margin-bottom'))==0)
					{
						$j('#textholder'+randID+'_'+(i+1)).animate({marginBottom:((-imgHeight*o.textholderHeight)-containerBorder+12)+'px'},500,function(){
							$j('#minmax'+randID+'_'+(i+1)).css('background-position','0 -16px')});
					}
					else
					{
						$j('#textholder'+randID+'_'+(i+1)).animate({marginBottom:'0px'},500,function(){
							$j('#minmax'+randID+'_'+(i+1)).css('background-position','0 -8px')});
					}

				});
			});

			function showtext(t,i)
			{
				if(autopilot)
				{
					$j('#minmax'+randID+'_'+i).hide();
					$j('#close'+randID+'_'+i).hide();
				}
				if(t != null)
				{
					$j('#textholder'+randID+'_'+i+' span').html(t); // Change textholder content
					$j('#textholder'+randID+'_'+i).stop().animate({marginBottom:'0px'},500); // Raise textholder
					$j('#minmax'+randID+'_'+i).css('background-position','0 -8px');
					showminmax();
				}
			}

			function showminmax()
			{
				if(!autopilot)
				{
					$j('.minmax',obj).fadeIn(250);
					$j('.close',obj).fadeIn(250);
				}
			}

			function hideCaption() {$j('.textholder',obj).stop().animate({marginBottom:(-imgHeight*o.textholderHeight-containerBorder-1)+'px'},o.transitionSpeed)}

			if(o.displayThumbnails)
			{
				function thumbclick(event)
				{
					target_num = this.id.split('_'); // we want target_num[1]
					if(viewable[0] != target_num[1])
					{
						status='pause';
						$j('#progress'+randID).stop().fadeOut();
						clearTimeout(clearInt);
						$j('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
						autopilot = 0;
					}
					if(target_num[1] > viewable[0])
					{
						diff = target_num[1] - viewable[0];
						moveLeft(diff);
					}
					if(target_num[1] < viewable[0])
					{
						diff = viewable[0]- target_num[1];
						moveRight(diff);
					}
				}

				var viewable = []; // track which images are being displayed
				var unviewable = []; // track which images are being displayed
				// Build thumbnail viewer and thumbnail divs
				$j(obj).after('<div id="thumbs'+randID+'" style="position:relative;overflow:auto;clear:left;text-align:left;padding-top:5px;"></div>');
				for(i=0;i<=numImages-1;i++)
				{
					thumb = $j('img:eq('+(i+1)+')', obj).attr('src');
					$j('#thumbs'+randID).append('<div class="thumb" id="thumb'+randID+'_'+(i+1)+'" style="cursor:pointer;background-image:url('+thumb+');display:inline;float:left;width:'+o.thumbnailWidth+';height:'+o.thumbnailHeight+';line-height:'+o.thumbnailHeight+';padding:0;overflow:hidden;text-align:center;border:2px solid #ccc;margin-right:4px;font-size:'+o.thumbnailFontSize+';font-family:Arial;color:#000;text-shadow:0 0 3px #fff">'+(i+1)+'</div>');
					if(i<=o.inView) $j('#thumb'+randID+'_'+i).css({'border-color':'#ff0000'});
					unviewable.push(i+1);
				}
				// Initialize viewable/unviewable arrays
				for(i=1;i<=o.inView;i++) viewable.push(unviewable.shift());

				// Next two lines are a special case to handle the first list element which was originally the last
				thumb = $j('img:first', obj).attr('src');
				$j('#thumb'+randID+'_'+numImages).css({'background-image':'url('+thumb+')'});
				$j('#thumbs'+randID+' div.thumb:not(:first)').css({opacity:.65}); // makes all thumbs 65% opaque except the first one

				$j('#thumbs'+randID+' div.thumb').hover(function(){$j(this).animate({'opacity':1},150)},function(){if(viewable[0]!=this.id.split('_')[1]) $j(this).animate({'opacity':.65},250)}); // add hover to thumbs
				// Assign click handler for the thumbnails. Normally the format $j('.thumb') would work but since it's outside of our object (obj) it would get called multiple times
				$j('#thumbs'+randID+' div').bind('click', thumbclick); // We use bind instead of just plain click so that we can repeatedly remove and reattach the handler
				
				if(!o.displayThumbnailNumbers) $j('#thumbs'+randID+' div').text('');
				if(!o.displayThumbnailBackground) $j('#thumbs'+randID+' div').css({'background-image':'none'});
			}

			if(o.showControls)
			{
				// Pause/play button(img)
				html = '<div id="play_pause_btn'+randID+'" style="cursor:pointer;position:absolute;top:3px;right:3px;border:none;width:16px;height:16px;background:url('+o.imagePath+'playpause.gif) no-repeat 0 0"></div>';
				$j(obj).append(html);
				var status = 'play';
				$j('#play_pause_btn'+randID).css('opacity',.5).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
				$j('#play_pause_btn'+randID).click(function(){
					status = (status == 'play') ? 'pause':'play';
					(status=='play') ? forceStart():forcePause();
				});

				if(!o.prevNextInternal)
				{
					wrapID = $(obj).attr('id')+'Wrapper';
					$j(obj).wrap('<div id="'+wrapID+'"></div>').css('margin','0 auto');
					$j('#'+wrapID).css('position','relative').width(($(obj).width()+40+parseInt($(obj).css('padding-left'))+parseInt($(obj).css('padding-right'))));
				}
				// Prev/next button(img)
				arrowsTop = ((imgHeight/2)-15)+parseInt(o.padding);
				html = '<div id="btn_rt'+randID+'" style="position:absolute;right:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat 0 0"></div>';
				html += '<div id="btn_lt'+randID+'" style="position:absolute;left:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat -13px 0"></div>';
				(o.prevNextInternal) ? $j(obj).append(html):$j('#'+wrapID).append(html);

				$j('#btn_rt'+randID).css('opacity',.5).click(function(){
					forcePrevNext('next');
				}).hover(function(){$j(this).animate({opacity:'1'},250)},function(){$j(this).animate({opacity:'.5'},250)});
				$j('#btn_lt'+randID).css('opacity',.5).click(function(){
					forcePrevNext('prev');
				}).hover(function(){$j(this).animate({opacity:'1'},250)},function(){$j(this).animate({opacity:'.5'},250)});

				if(o.autoHideControls && o.prevNextInternal)
				{
					function showcontrols()
					{
						$j('#play_pause_btn'+randID).stop().animate({top:'3px',right:'3px'},250);
						$j('#btn_rt'+randID).stop().animate({top:arrowsTop+'px',right:'2px'},250);
						$j('#btn_lt'+randID).stop().animate({top:arrowsTop+'px',left:'2px'},250);
					}
					function hidecontrols()
					{
						$j('#play_pause_btn'+randID).stop().animate({top:-16-containerBorder+'px',right:-16-containerBorder+'px'},250);
						$j('#btn_rt'+randID).stop().animate({right:'-16px'},250);
						$j('#btn_lt'+randID).stop().animate({left:'-16px'},250);
					}
					$j(obj).hover(showcontrols,hidecontrols);
					hidecontrols();
				}
				if(o.autoHideCaptions)
				{
					var isHover;
					function autoShowCap(){isHover=true;for(i=1;i<=o.inView;i++) showtext($j('li:eq('+i+') p', obj).html(),i);}
					function autoHideCap(){isHover=false;hideCaption();}
					$j(obj).hover(autoShowCap,autoHideCap);
					hideCaption();
				}
			}

			function keyBind(){
				if(o.enableKeyboardNav)
				{
					$j(document).keydown(function(event){
						if(event.keyCode == 39)
						{
							forcePrevNext('next');
							$j(document).unbind('keydown');
						}
						if(event.keyCode == 37)
						{
							forcePrevNext('prev');
							$j(document).unbind('keydown');
						}
						if(event.keyCode == 80 || event.keyCode == 111) forcePause();
						if(event.keyCode == 83 || event.keyCode == 115)
						{
							forceStart();
							$j(document).unbind('keydown');
						}
					});
				}
			}

			function forcePrevNext(dir)
			{
				o.onPauseClick.call(this);
				$j('#btn_rt'+randID).unbind('click');
				$j('#btn_lt'+randID).unbind('click');
				autopilot = 0;
				$j('#progress'+randID).stop().fadeOut();
				status='pause';
				clearTimeout(clearInt);
				(dir=='prev') ? moveRight():moveLeft();
				setTimeout(function(){
						$j('#play_pause_btn'+randID).bind('click',function(){forceStart();});
						$j('#btn_rt'+randID).bind('click',function(){forcePrevNext('next')});
						$j('#btn_lt'+randID).bind('click',function(){forcePrevNext('prev')});
					},o.transitionSpeed);
			}
			
			function forcePause()
			{
				$j('#play_pause_btn'+randID).unbind('click'); // unbind the click, wait for transition, then reenable
				if(autopilot)
				{
					o.onPauseClick.call(this);
					$j('#play_pause_btn'+randID).fadeTo(250,0,function(){$j(this).css({'background-position':'0 -16px','opacity':'.5'});}).animate({opacity:.5},250);
					autopilot = 0;
					showminmax();
					$j('#progress'+randID).stop().fadeOut();
					clearTimeout(clearInt);
					setTimeout(function(){$j('#play_pause_btn'+randID).bind('click',function(){forceStart();})},o.transitionSpeed);
				}
			}

			function forceStart()
			{
				$j('#play_pause_btn'+randID).unbind('click'); // unbind the click, wait for transition, then reenable
				if(!autopilot)
				{
					setTimeout(function(){$j('#play_pause_btn'+randID).css('background-position','0 0')},o.transitionSpeed-1);
					autopilot = 1;
					moveLeft();
					clearInt=setInterval(function(){moveLeft();},o.displayTime+o.transitionSpeed);
					setTimeout(function(){$j('#play_pause_btn'+randID).bind('click',function(){forcePause();})},o.transitionSpeed);
				}
			}
			
			function preMove()
			{
				hideCaption();
				// Fade out play/pause/left/right
				if(o.showControls && o.prevNextInternal)
				{
					$j('#play_pause_btn'+randID).fadeOut(200);
					$j('#btn_lt'+randID).fadeOut(200);
					$j('#btn_rt'+randID).fadeOut(200);
				}
				if(o.displayThumbnails) for(i=1;i<=numImages;i++) $j('#thumb'+randID+'_'+i).css({'border-color':'#ccc'}).animate({'opacity': .65},500);
			}

			function postMove()
			{
				if(o.showControls && o.prevNextInternal)
				{
					$j('#play_pause_btn'+randID).fadeIn(200);
					$j('#btn_lt'+randID).fadeIn(200);
					$j('#btn_rt'+randID).fadeIn(200);
				}
				keyBind();
				if(o.autoHideCaptions && isHover) autoShowCap();
				if(o.displayThumbnails) for(i=0;i<viewable.length;i++) $j('#thumb'+randID+'_'+viewable[i]).css({'border-color':'#ff0000'}).animate({'opacity': 1},500);
				if(!o.autoHideCaptions) for(i=1;i<=o.inView;i++) showtext($j('li:eq('+i+') p', obj).html(),i);
				if(o.displayThumbnails) $j('#thumbs'+randID+' div').bind('click', thumbclick).css({'cursor':'pointer'});
				ary=[];
				for(x=1;x<=o.inView;x++){ary.push($j('img:eq('+x+')',obj).attr('src'))}
				o.onSlideEnd.call(this,ary);
			}

			function moveLeft(dist)
			{
				if(dist==null) dist=o.advance;
				preMove();
				if(o.displayThumbnails)
				{
					for(i=1;i<=dist;i++){
						viewable.push(unviewable.shift());
						unviewable.push(viewable.shift());
					}
				}
				if(o.displayTime == 0){clearInterval(clearInt);} // If running a contonuous show with no display time, fist clear the interval. Then below, recursively call moveLeft
				$j('li:lt('+dist+')', obj).clone(true).insertAfter($j('li:last', obj)); // Copy the first image (offscreen to the left) to the end of the list (offscreen to the right)
				o.onSlideStart.call(this,viewable,'left');
				$j('ul', obj).animate({left:-imgWidth*(dist+1)-(parseInt(o.padding)*(dist+1))*2},o.transitionSpeed,o.easeLeft,function(){ // Animate the entire list to the left
					$j('li:lt('+dist+')', obj).remove(); // When the animation finishes, remove the first image (on the left). It has already been copied to the end of the list (right)
					$j(this).css({'left':-imgWidth-parseInt(o.padding)*2});
					if(o.displayProgressBar && autopilot) startProgressBar();
					postMove();
					if(o.displayTime == 0){moveLeft();}
				});
			}
			function moveRight(dist)
			{
				if(dist==null) dist=o.advance;
				preMove();
				if(o.displayThumbnails)
				{
					for(i=1;i<=dist;i++){
						viewable.unshift(unviewable.pop());
						unviewable.unshift(viewable.pop());
					}
				}
				$j('li:gt('+(numImages-(dist+1))+')', obj).clone(true).insertBefore($j('li:first', obj)); // Copy rightmost (last) li and insert it after the first li
				o.onSlideStart.call(this,viewable,'right');
				$j('ul', obj).css('left',-(imgWidth*(dist+1))-(parseInt(o.padding)*((dist+1)*2)))
					.animate({left:-imgWidth-(parseInt(o.padding)*2)},o.transitionSpeed,o.easeRight,function(){
						$j('li:gt('+(numImages-1)+')', obj).remove();
						postMove();
					});
			}

			// Kickoff the show
			if(autopilot)
			{
				var clearInt = setInterval(function(){moveLeft();},o.displayTime+o.transitionSpeed);
				if(o.displayProgressBar) startProgressBar(o.displayTime+o.transitionSpeed);
			} else {}
			keyBind();
 		});
	}
	});
})(jQuery);
</script>
<div id="carousel">
	<ul>
		<?php $i = 0; foreach ($bannerCollection as $banner): $i++; ?>
		<li><a href="<?php echo $banner['weblink'];?>"><img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . $banner['filename']?>" title="<?php echo $banner['title']?>" alt="<?php echo $banner['title']?>" style="width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px;"/></a><?php if ($showdesc == '1'):?><p><?php echo $banner['content']; ?></p><?php endif;?></li>
		<?php endforeach; ?>
	</ul>
</div>
</div>

<?php elseif ($listStyle == ''):?>
	<?php echo ("Please Upload Banner Or Configuration"); ?>
<?php endif;?>
<div class="clear"></div>